<template>
  <div class="jobitem" v-on:click="toDetail">
    <div class="avatar-content left">
      <img class="avatar" :src="jobDetail.logo? jobDetail.logo : noavatar" alt="图片">
    </div>
    <div class="right">
      <van-row type="flex" justify="space-between">
        <van-col span="17" class="jobname">{{jobDetail.pname}}</van-col>
        <van-col span="7">{{jobDetail.pubtime}}</van-col>

      </van-row>
      <van-row type="flex" justify="space-between">
        <van-col span="17">
          <van-row>
            <van-col class="companyname">发布人:{{jobDetail.lietou}}</van-col>
          </van-row>
          <van-row>
            <van-col class="gray">{{jobDetail.areaName}} | {{jobDetail.cityName?jobDetail.cityName:'未知城市'}} | {{jobDetail.salaryMin}}万-{{jobDetail.salaryMax}}万</van-col>
          </van-row>
        </van-col>
        <van-col span="7" class="bounce">
          <!-- <van-icon name="after-sale" style="top:3px;font-size:0.9rem"/> -->
           ￥{{jobDetail.payment}}</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    jobDetail:{
      type:Object,
      require: false
    }
  },
  data: function(){
    return{
      noavatar: 'http://img0.imgtn.bdimg.com/it/u=309420998,862661986&fm=27&gp=0.jpg'
    }
  },
  methods:{
    toDetail:function(event){
      // console.log(event)
      // event.stopPropagation();
      this.$router.push({ path: 'jobdetail', query: { id: this.jobDetail.id}})
      // this.$router.push({
      //   name:'jobdetail',
      //   params:{
      //     id: this.jobDetail.id,
      //     lietou: this.jobDetail.lietou
      //   }
      // })
    }
  }
}
</script>

<style lang="stylus" scoped>
.jobitem{
  height 80px
  border-bottom solid 1px #eeeeee
  margin-bottom 8px
  background-color white
  padding 8px 16px
}
.avatar-content{
  height 70px
  padding 5px 0px
  float left
}
.avatar{
  height 60px
  padding 5px
  border-radius  100%
  margin-right 8px
}
.right{
  padding-top 10px
}
.bounce{
  color #FF4500
  font-size 22px
  line-height 38px
  vertical-align middle
}
.jobname{
  font-size 16px
  line-height 22px
}
.gray{
  color #808080
  font-size 10px
  line-height 22px
}
.companyname{
  line-height 22px
}
</style>

